Vue.js

（1）双向数据绑定

v-model="msg0101"，一旦v-model中的数值发生变化，所有用vue表达式{{msg0101}}的数据都会更新。

（2）单次插值

v-model="msg0102"，但是：如果我们仅仅需要显示msg0102初始化的值，则用{{#msg0102}}取值，这样，即便model中的数值发生变化，我们这里取出来的还是最原先的值。

（3）html文本的显示与转义

{{}}双大括号默认显示的是在data中定义的字符串，即便是html文本，也会原样输出。

例如，我们在data中定义了msgHtml：'helloworld'，为了在页面中也显示的是html代码，我们只需要正常取值就ok：{{msgHtml}}

但是，如果我们要将我们的字符串文本在页面显示为正常的文档流，则用三大括号{{{msgHtml}}}输出，页面显示的就是helloworld。span标签已经显示在文档流中了

（4）html特性（双大括号标签也可以用在 HTML 特性 (Attributes) 内）

结果展示：

在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

（1）javascript表达式

二元表达式

在data中定义

{{number01+1}}渲染后：11（数值类型二元运算）

{{number02+1}}渲染后：101（数值类型与字符串类型相加，先将数值类型转化为字符串，然后拼接字符串）

三元表达式

data中初始化四个数值

 div中的表达式判断

ok01 is true: {{ok01?"ok01":"cancel01"}}

ok02 is false: {{ok02?"ok02":"cancel02"}}

ok03 is "hello": {{ok03?"ok03":"cancel03"}}

ok04 is "": {{ok04?"ok04":"cancel04"}}

 注意：在三元表达式中{{isOk?"yes":"no"}}表达式相当于下面的条件判断

使用js函数

在data中初始化数据msg01

在vue绑定的标签中写入

结果展示：

this is message01在表达式中倒序: 10egassem si siht

（2）过滤器

官方过滤器API：http://cn.vuejs.org/api/#过滤器

在data中定义数组fItems:

在vue绑定的标签内引用过滤器（lowercase：将所有字母变为小写，currency：指定货币符号）

结果展示：

完整html代码如下：